<template>
  <div class="data">
    <div>
      <p>五台山景区后台数据看板</p>
      <table border="1px" width="900px" height="70px">
        <tr>
          <th>平台用户</th>
          <th>景点数量</th>
          <th>订单数量</th>
          <th>订单总额</th>
        </tr>
        <tr>
          <td>{{data1}}</td>
          <td>{{data2}}</td>
          <td>{{data3}}</td>
          <td>{{data4}}</td>
        </tr>
      </table>
    </div>

    <div class="container">
      <div id="d1"></div>
      <div id="d2"></div>
      <div id="d3"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      data1: '',
      data2:'',
      data3:'',
      data4:''
    }
  },
     //实例创建之前钩子函数--给body添加行内样式
    beforeCreate() {
      this.$nextTick(() => {
        document.body.setAttribute("style", "background: rgb(16,12,42)");
      });
    },
    //实例销毁之前钩子--移除body 标签的属性style
    beforeDestroy() {
      document.body.removeAttribute("style");
    },
  mounted() {
    this.getEchartData();
    this.getEchartData1();
    this.getEchartData2();
this.axios.get('/mesum').then(res=>{
  console.log(res)
this.data1=res.data.res[0][0].sumuser
this.data2=res.data.res[1][0].sumjd
this.data3=res.data.res[2][0].sumdd
this.data4=res.data.res[3][0].sumddze
})
  
  },
  methods: {
    getEchartData() {
      var chartDom = document.getElementById("d1");
      var myChart = echarts.init(chartDom,'dark');

      const option = {
        title:{
           text: "每周用户活跃度",

        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
        ],
      };
      //   chart.setOption(option);
      option && myChart.setOption(option);
    },
    getEchartData1() {
      var chartDom = document.getElementById("d3");
      var myChart = echarts.init(chartDom,'dark');
      const data = genData(10);

      const option = {
        title: {
           text: "各景区订单总额",
          
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          data: data.legendData,
        },
        series: [
          {
            name: "姓名",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      function genData(count) {
        // prettier-ignore
        const nameList = [
        '五', '台', '山', 
    ];
        const legendData = [];
        const seriesData = [];
        for (var i = 0; i < count; i++) {
          var name =
            Math.random() > 0.
              ? makeWord(4, 1) + "·" + makeWord(3, 0)
              : makeWord(2, 1);
          legendData.push(name);
          seriesData.push({
            name: name,
            value: Math.round(Math.random() * 10),
          });
        }
        return {
          legendData: legendData,
          seriesData: seriesData,
        };
        function makeWord(max, min) {
          const nameLen = Math.ceil(Math.random() * max + min);
          const name = [];
          for (var i = 0; i < nameLen; i++) {
            name.push(
              nameList[Math.round(Math.random() * nameList.length - 1)]
            );
          }
          return name.join("");
        }
      }
      option && myChart.setOption(option);
    },
    getEchartData2() {
      var chartDom = document.getElementById("d2");
      var myChart = echarts.init(chartDom,'dark');
      // prettier-ignore
let dataAxis = [];
// prettier-ignore
let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
let yMax = 500;
let dataShadow = [];
for (let i = 0; i < data.length; i++) {
  dataShadow.push(yMax);
}
const option = {
  title: {
    text: '景区订单数',
    subtext: ''
  },
  yAxis: {
    data: dataAxis,
    axisLabel: {
      inside: true,
      color: '#fff'
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    },
    z: 10
  },
  xAxis: {
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: '#999'
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: [
    {
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      },
      emphasis: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2378f7' },
            { offset: 0.7, color: '#2378f7' },
            { offset: 1, color: '#83bff6' }
          ])
        }
      },
      data: data
    }
  ]
};
// Enable data zoom when user click bar.
const zoomSize = 6;
myChart.on('click', function (params) {
  console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
  myChart.dispatchAction({
    type: 'dataZoom',
    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    endValue:
      dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
  });
});

option && myChart.setOption(option);
    },
   
  },
};
</script>

<style lang="scss" scoped>
p {
  text-align: center;
  font-size: 36px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
}
table {
  margin: 0 auto;
  border-collapse: collapse;
  color: white;

  td {
    text-align: center;
  }
}

.container {
  position: relative;
  width: 100%;
  height: 700px;
  margin-top: 24px;
}

#d1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 61%;
  height: 49%;
//   background-color: burlywood;
}

#d2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 100%;
//   background-color: pink;
}

#d3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 61%;
  height: 49%;
//   background-color: skyblue;
}
body {
  background: rgb(16, 12, 42);
}
</style>